<template>
  <div>
    <div class="wp1080 cf">
      <el-col :span="24">
        <rootPath-view :child-msg="current"></rootPath-view>
      </el-col>
      <div class="right-border cf left-box">
        <div class="left-header">
          <div class="title">
            <div>网络游戏大全</div>
            <span @click="type=true" :class="[{ bjBlue: type }]">最新</span>
            <span @click="type=false" :class="[{ bjBlue: !type }]">热门</span>
          </div>
        </div>
        <div class="leftList">
          <el-col :span="8" v-for="(item, index) in dataList" :key="index">
            <leftList-view v-if="type" :child-msg="item"></leftList-view>
          </el-col>
          <el-col :span="8" v-for="(item, index) in dataList" :key="index">
            <leftList-view v-if="!type" :child-msg="item"></leftList-view>
          </el-col>
        </div>
        <div class="cf">
          <pagination-view  :pageCount="5" :current-page="currentPage" @pageGames="getPageGames"></pagination-view>
        </div>
      </div>
      <div class="right-box">
        <rightButton-view :child-msg="classify"></rightButton-view>
      </div>
    </div>
    <easyfooter></easyfooter>
  </div>
</template>

<script>
import leftList from '../components/leftList.vue'
import rightButton from '../components/rightButton.vue'
import pagination from '../components/pagination.vue'
import rootPath from '../components/rootPath.vue'
// import { Loading } from 'element-ui'
import easyfooter from '../components/easy-footer.vue'

export default {
  name: 'online',
  components: {
    'leftList-view': leftList,
    'rightButton-view': rightButton,
    'rootPath-view': rootPath,
    'pagination-view': pagination,
    'easyfooter': easyfooter
  },
  data () {
    return {
      type: false,
      current: '汉化破解',
      currentPage: '1',
      dataList: [
        // {
        //   id: '111111',
        //   name: '香肠派对',
        //   imgUrlIcon: '/static/img/left.png',
        //   gameSize: '110M',
        //   chosed: false
        // }
      ],
      classify: {
        type: '游戏分类',
        data: [
          {
            name: '角色扮演',
            has: false
          },
          {
            name: '动作',
            has: false
          },
          {
            name: '策略',
            has: false
          },
          {
            name: '卡牌',
            has: false
          },
          {
            name: '模拟',
            has: false
          },
          {
            name: '益智',
            has: false
          },
          {
            name: '休闲',
            has: false
          },
          {
            name: '街机',
            has: false
          },
          {
            name: '冒险',
            has: false
          },
          {
            name: '体育',
            has: false
          }
        ]
      }
    }
  },
  methods: {
    getPageGames (val) {
      console.log(val)
    }
  },
  created () {
    // let loadingInstance = Loading.service({fullscreen: true, spinner: 'el-icon-loading', background: 'rgba(255,255,255, 0.8)'})
    let onlineAPI = '/pc/gamesByTag/36'
    let that = this
    // 此地有传auth(token)认证 为空就不会执行
    this.$request.get(onlineAPI, false,
      function (res) {
        if (res.data.code === 1000) {
          // loadingInstance.close()
          that.dataList = res.data.rst
          console.log(that.dataList)
        }
      }
    )
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      // console.log(vm)
    })
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  }
}
</script>
<style scoped>
  .left-header .title{
    height: 30px;
    line-height: 30px;
    width: 100%;
    padding: 0 0 15px 0;
  }
  .left-header div{
    float: left;
    color: rgba(115, 115, 115, 1);
    font-size: 20px;
    text-align: left;
    font-family: Roboto;
  }
  .left-header span{
    cursor: pointer;
    float: right;
    color: rgba(115, 115, 115, 1);
    font-size: 14px;
    text-align: right;
    font-family: Roboto;
    padding: 0 5px;
  }
  .leftList{
    clear: both;
  }
  .bjBlue{
    color: #009688 !important;
  }
  .left-box{
    float:left;
    width:684px;
    background-color: white;
    text-align: center;
    /*box-shadow: 0px 0px 3px 0px rgba(229, 229, 229, 1);*/
    padding: 24px 18px;
    margin-bottom: 20px;
  }
  .right-box{
    float:right;
    width:340px;
  }
</style>
